<script setup lang="ts">
import type { IStep } from '@pkgs/components/base/base-guide/type'
import { BaseGuide } from '@pkgs/components'
import { ref } from 'vue'

const guideVisible = ref(false)

const steps: IStep[] = [
  {
    target: 'g-base-guide2-1',
    placement: 'bottom',
    popper: {
      title: '标题1',
      content: '内容1',
    },
  },
  {
    target: 'g-base-guide2-2',
    placement: 'bottom',
    popper: {
      title: '标题2',
      content: '内容2',
    },
  },
  {
    target: 'g-base-guide2-3',
    placement: 'bottom',
    popper: {
      title: '标题3',
      content: '内容3',
    },
  },
]
</script>

<template>
  <ElButton
    type="primary"
    class="mb-16px"
    @click="guideVisible = true"
  >
    开始
  </ElButton>

  <div class="flex gap-16px">
    <ElCard
      v-for="i in 3"
      :id="`g-base-guide2-${i}`"
      :key="i"
      class="w-100px h-100px flex items-center justify-center"
    >
      {{ i }}
    </ElCard>
  </div>

  <BaseGuide
    v-model:visible="guideVisible"
    :steps="steps"
  >
    <template #title="step">
      我是自定义标题--{{ step?.popper?.title }}
    </template>

    <template #content="step">
      我是自定义内容--{{ step?.popper?.content }}
    </template>
  </BaseGuide>
</template>
